Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 400 100">
	  <defs>

			<pattern id="diagonalHatch" patternUnits="userSpaceOnUse">
</pattern>

</defs>

<div class="controls">
	<label>
		Edit Text
		<input placeholder="Type here to change text" id=text />
	</label>
	<label>
		Edit Size
		<input type="number" id=size />
	</label>
	<label>
		Edit Outline Thickness
		<input type="number" id=thickness step=".1"/>
	</label>
</div>
</body>
</html>

console.log("Event Fired")
console.clear();

const pattern = document.getElementById('diagonalHatch');
const morph = document.getElementById('outline').querySelector("feMorphology");
const inputText = document.getElementById("text");
const inputSize = document.getElementById("size");
const inputThickness = document.getElementById("thickness");
const text = document.querySelector("text");

const getTime = () => (new Date()).getTime();
const start = getTime();
const duration= 2000;

let size = 6;
let thickness = .1

const updateText = (newText) => text.innerHTML = newText.toUpperCase();
inputText.addEventListener("keyup", (e) =>{
	text.innerHTML = updateText(e.target.value)
})
inputText.value = "design";
updateText(inputText.value)

const updateSize = (newSize) => {
	size = newSize;
	setSizes();
}
inputSize.value = size;
inputSize.addEventListener("change", (e) =>{
	updateSize(e.target.value);
})

const updateThickness = (newThickness) => {
	thickness = newThickness;
	setSizes();
}
inputThickness.value = thickness;
inputThickness.addEventListener("change", (e) =>{
	updateThickness(e.target.value);
})

function animate () {
	requestAnimationFrame(animate);
	
	const now = getTime();
	const diff = now - start;
	const t = (diff % duration) / duration;
	
	pattern.setAttribute("y", size * -t);
}
animate();

Frontend Forever App